'use client'      //带布局系统的组件必须声明为“客户端组件”
import { adminInfo, adminUpdatePwd } from '@/service'
import { AppstoreFilled, BarChartOutlined, BuildFilled, DownOutlined, FormatPainterOutlined, GlobalOutlined, HomeFilled, HomeOutlined, LeftOutlined,MedicineBoxFilled,MenuFoldOutlined, MenuUnfoldOutlined, PoweroffOutlined, QuestionCircleOutlined, RadarChartOutlined, SettingFilled, UserOutlined } from '@ant-design/icons'
import { Button, Divider, Dropdown, Form, Input, Layout, Menu, Modal, Popover, Space, Typography, message } from 'antd'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import React, { useEffect, useRef, useState } from 'react'

//数据库中权限的图标名称 与 Antd Icons中的图标 一对一映射图
const iconMap = {
  home: <HomeFilled/>,
  building: <RadarChartOutlined/>,
  medical: <MedicineBoxFilled/>,
  category: <AppstoreFilled/>,
  chart: <BarChartOutlined/>,
  basic: <GlobalOutlined/>,
  layers: <SettingFilled/>,
}
//使用方法：  iconMap['home']

export default function({children}) {
  //状态变量 —— 当前主题色
  let [themeColor, setThemeColor] = useState('#0E4A93')
  //状态变量 —— 保存有哪些可选的皮肤颜色
  let [skins, setSkins] = useState(['#f00','#99f','#669','#080','#826cde'])
  //状态变量 —— 当前登录用户的信息
  let [admin, setAdmin] = useState({})
  //路由器对象 —— 用于页面跳转
  let  router = useRouter()
  //状态变量 —— 记录左侧的侧边栏当前是否折叠起来了
  let [siderCollapsed, setSiderCollapsed] = useState(false)
  //状态变量 —— 是否显示“修改密码”模态对话框
  let [showPwdModal, setShowPwdModal] = useState(false)
  //组件引用 —— 指向“修改密码”表单组件对象
  let pwdForm = useRef()

  //副作用方法 —— 监视“组件挂载”事件，异步请求当前登录用户的身份信息
  useEffect(()=>{
    //异步请求当前登录用户的身份信息
    ;(async()=>{
      let data = await adminInfo()
      // console.log(data)
      if(data.code){    //客户端没能提交合法的token，说明没有登录或者登录已超时
        Modal.info({    //弹出登录提示框
          title: '提示',
          content:'您尚未登录或登录已超时，请重新登录！',
          okText: '去登录',
          onOk: ()=>router.replace('/')//注意：此处箭头函数声明了形参就不会自动关闭了
        })
      }else {           //已经成功读取到用户信息
        setAdmin(data)
      }
    })()
  }, [])

  //指定侧边菜单中的菜单项
  //key：每个菜单项唯一的标识   icon：菜单项前面的图标     label：标签文字   children：子菜单列表
  // let menuItems = [
  //   {key:'1', icon:<HomeFilled/>, label:'首页', children:null},
  //   {key:'2', icon:<BuildFilled/>, label:'智慧物业', children:[
  //     {key:'2-1-/admin/fee/pay', label:'物业缴费',children:null},
  //     {key:'2-2-/admin/fee/query', label:'缴费查询',children:null},
  //     {key:'2-3-/admin/repair', label:'故障保修',children:null},
  //   ]},
  //   {key:'3', icon:<MedicineBoxFilled/>, label:'社区医疗', children:[
  //     {key:'3-1', label:'社区挂号1',children:null},
  //     {key:'3-2', label:'社区挂号2',children:null},
  //     {key:'3-3', label:'社区挂号3',children:[
  //       {key:'3-3-1', label:'普通号'},
  //       {key:'3-3-2', label:'专家号'},
  //       {key:'3-3-3', label:'特护号'},
  //     ]},
  //   ]}
  // ]
  //把用户的权限(多级嵌套) 映射为 导航菜单项 —— 必须使用“函数的递归调用”
  let privilegeMenuMap = (privileges)=>{
    if(!privileges || privileges.length===0){   //形参如果没有数据则，返回null
      return null
    }
    return privileges.map( (p, i)=>{return {
      key: p.pid + '-' + p.path,     //菜单项的key，由一个数字+"-"+跳转路径
      label: p.pname,                //菜单项上的标签名
      icon: iconMap[p.icon],         //菜单项上的图标
      children: privilegeMenuMap(p.children)    //菜单项下面的子菜单项 —— 把当前权限的子权限列表映射为子菜单列表
    }} )
  }

  return (
  <>
    {/* 使用antd提供的布局系统 */}
    <Layout>
      {/* 左侧：功能菜单 */}
      {/* collapsible：侧边栏是否可以折叠起来，如果设为true，则可以有展开/收起的动画+底部的触发按钮 */}
      {/* collapsed：侧边栏当前处于折叠状态吗？ */}
      {/* trigger：用于自定义触发按钮内容,null表示取消默认提供的折叠按钮 */}
      <Layout.Sider 
        collapsible
        collapsed={siderCollapsed}         
        trigger={null}
        style={{color:'#fff',background:themeColor,height:'100vh',padding:'5px'}}>
        {/* 侧边“导航菜单” */}
        {/* mode：菜单模式  horizontal-页面顶部的水平菜单  inline-子菜单项出现在父项下面  vertical-子菜单项出现在父项右面 */}
        {/* items：指定菜单中的菜单项 */}
        <Menu 
          mode="inline"
          onClick={e=>{
            let path = e.key.split('-')[1]  //从菜单项的key中拆分出跳转地址
            router.push(path)  //保留跳转
          }}
          items={ privilegeMenuMap(admin.privileges) }
        />
      </Layout.Sider>
      {/* 右侧：顶部导航 + 页面主体 */}
      <Layout style={{minWidth:'800px'}}>
        <Layout.Header style={{color:'#fff',background:themeColor,marginLeft:'1px', paddingLeft:0, display:'flex'}}>
          {/* 侧边栏展开/收起的控制按钮 */}
          {/* type="text"：让按钮的外观显示为“文字”样式，但是点击后可以看到类似按钮的背景色 */}
          {/* icon：指定按钮上的图标，使用此属性比直接在按钮内放图标可以产生更紧凑的内边距 */}
          <Button 
            type='text' 
            icon={siderCollapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
            onClick={_=>setSiderCollapsed(!siderCollapsed)}
            style={{fontSize:'16px',width:'64px',height:'64px', color:'#fff'}}/>
          {/* 中央的主标题 */}
          <div style={{flex: 1, display:'flex', alignItems:'center'}}>
            <Typography.Title level={3} style={{margin:0, color:'#fff'}}>天通苑智慧社区后台管理系统</Typography.Title>
          </div>
          {/* 右侧的功能按钮组 */}
          <div>
            {/* 功能按钮组1：“用户” */}
            <UserOutlined style={{fontSize:'18px'}}/>
            <Dropdown menu={{items:[
              {key: 1, label: '修改密码', onClick:_=>setShowPwdModal(true)},
              {key: 2, label: '个人信息'},
            ]}}>
              <Button type='text' style={{color:'#fff',paddingLeft:'3px'}}>
                {admin.aname}<DownOutlined/>
              </Button>
            </Dropdown>
            {/* 功能按钮组2：“调色板” */}
            <FormatPainterOutlined style={{fontSize:'18px'}}/>
            {/* 气泡式卡片/弹出浮层  */}
            <Popover content={<Space style={{display:'flex'}}>{skins.map((s,i)=>(  
              <div 
                key={i} 
                style={{width:'60px',height:'40px',background:s}}
                onClick={_=>setThemeColor(s)}>
              </div>
            ))}</Space>}>
              <Button type='text' style={{color:'#fff',paddingLeft:'3px'}}>换肤</Button>
            </Popover>
            {/* 功能按钮组3：“帮助” */}
            <QuestionCircleOutlined style={{fontSize:'18px'}}/>
            {/* 功能按钮组4：“退出” */}
            <PoweroffOutlined style={{fontSize:'18px'}} onClick={_=>Modal.confirm({
              title: '确认',
              content: '您确定要退出吗？',
              okText: '确定',
              onOk: ()=>router.replace('/'),   //注意：此处的箭头函数加了形参就无法自动关闭了
              cancelText: '取消'
            })}/>
          </div>
        </Layout.Header>
        <Layout.Content style={{background:'#f5f5f5'}}>
          {children}
        </Layout.Content>
      </Layout>
    </Layout>
   
    {/* 固定定位的模态对话框1：修改密码 */}
    <Modal 
      title="修改密码" 
      open={showPwdModal}
      okText="确定"
      onOk={_=>{
        pwdForm.current.submit()  //通过组件的引用，查找到表单对象，提交它
      }}
      cancelText="取消"
      onCancel={_=>setShowPwdModal(false)}>
        <Divider/>
        <Form ref={pwdForm} labelCol={{span:5}} wrapperCol={{span:19}} onFinish={async values=>{
          let data = await  adminUpdatePwd(values.oldPwd, values.newPwd)
          if(data.code===2000){    //密码修改成功
            //弹出吐司对话框，提示修改成功，3s后自动消失，顺带着关闭模态对话框
            message.success('密码修改成功！', 3, ()=>{setShowPwdModal(false)})
          }else {             //密码修改失败
            //弹出模态对话框，弹出修改消息
            Modal.error({
              title: '错误',
              content: '密码修改失败！服务器返回错误消息：'+data.msg,
              okText: '确定'
            })
          }
        }}>
            <Form.Item name="oldPwd" label="旧密码" rules={[{required:true, message:'旧密码不能为空'}]}>
              <Input.Password placeholder='请输入旧密码'/>
            </Form.Item>
            <Form.Item name="newPwd" label="新密码" rules={[{required:true, message:'新密码不能为空'}]}>
              <Input.Password placeholder='请输入新密码'/>
            </Form.Item>
            <Form.Item name="repeatPwd" label="重复密码" rules={[{required:true, message:'再次输入的密码不能为空'}]}>
              <Input.Password placeholder='请再输入一次'/>
            </Form.Item>
        </Form>
        <Divider/>
    </Modal>
  </>  
  )
}
